<template>
	<div>
		<NavBarBack :title="navBarBackTitle" />
		<van-card
			@click="goDetail(id)"
			v-for="{id,money,desc,label,src,dir,sold, freight } of datas"
			:key="id"
			:price="money"
			:desc="label"
			:title="label.substring(0,6)"
			:thumb="src"
		>
			<div slot="footer">
				<div class="card-foote">
					<span>{{freight}}</span>
					<span>{{sold}}+人支付</span>
					<span>{{dir}}</span>
				</div>
			</div>
		</van-card>
	</div>
</template>

<script>
import NavBarBack from '../../components/navBarBack'
import { listApi } from '../../api'
export default {
	name: 'list',
	components: { NavBarBack },
	data() {
		return {
			urlId: this.$route.params.id,
			datas: []
		}
	},
	computed: {
		navBarBackTitle() {
			let title = ''
			switch (this.urlId) {
				case 'yunying':
					title = '孕婴专区'
					break
				case 'dianzi':
					title = '电子专区'
					break
				case 'jixie':
					title = '机械专区'
					break
			}
			return title
		}
	},
	methods: {
		// 跳转到详情页
		goDetail(id) {
			this.$router.push('/detail/' + id)
		}
	},
	mounted() {
		// console.log(this.navBarBackTitle)
		// 在这里用这个id去请求数据
		listApi(this.urlId).then(res => {
			// console.log(res)
			this.datas = res
		})
	}
}
</script>

<style scoped>
.card-foote span {
	margin: 0 20px;
}
</style>